<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
</head>
<body>
<!--标签-->
<div>
    <h1>标签</h1>
    <p color="bule">段落</p>
    <p align="left">左</p>
    <p align="right">右</p>
    <p align="center">中</p>
    <hr color="red" width="300xp" size="2xp" name="水平线">
    <br>换行
    <h1 color="green">这里会换行<br> 你看</h1>
    <a href="html/From交互.html">超文本链接(跳转链接的作用)</a>
    <img src="image/pexels-photo-26796134.jpeg" alt="美丽的风景" width="750" height="750" title="风景比亚迪">
</div>
<!--文字-->
<div>
    <em>着重文字</em>
    <b>粗体文字</b>
    <i>斜体文字</i>
    <strong>加重语气</strong>
    <del>删除文字</del>
    <span>css配合使用</span>
</div>
<!--列表-->
<!--有序列表-->
<div>
    <ol type="a">
        <li>banana</li>
        <li>eggplant</li>
        <li>watermelon</li>
        <li>grapes</li>
    </ol>
    <ol type="A">
        <li>动物
            <ol>
                <li>lion</li>
                <li>tiger</li>
                <li>elephant</li>
                <li>cat</li>
                <li>otter</li>
            </ol>
        </li>
        <li>蔬菜
            <ol>
                <li>有机蔬菜
                    <ol>
                        <li>tomato</li>
                        <li>cucumber</li>
                        <li>begonia</li>
                    </ol>
                </li>
            </ol>
        </li>
        <li>肉类</li>
    </ol>
    <ol type="I"></ol>
    <ol type="i"></ol>

</div>
<!--无序列表-->
<div>
    <ul>
        <li>无需列表</li>
        <li>没有先后顺序</li>
    </ul>
    <ul type="disc">
        <li>默认实心圆</li>
    </ul>
    <ul type="circle">
        <li>空心圆</li>
    </ul>
    <ul type="square">
        <li>小方块</li>
    </ul>
    <ul type="none">
        <li>不显示</li>
    </ul>
</div>
<!--表格-->
<div>
    <table border="1px" width="400px" height="20 px">表格设置边框</table>
    <tr>行</tr>
    <td>单元格(列)</td>
    <table border="1px" height="500px" width="400px">
        <p>合并6和7 用：rowspan</p>
        <p>合并15和20 用：colspan</p>
        <p>水平合并保留左 删右</p>
        <p>垂直合并保留上 删下</p>
        <tr>
            <td>单元格1</td>
            <td>单元格2</td>
            <td>单元格3</td>
            <td>单元格4</td>
            <td>单元格5</td>
        </tr>
        <tr>
            <td colspan="2">单元格6,7</td>
            <td>单元格8</td>
            <td>单元格9</td>
            <td>单元格10</td>
        </tr>
        <tr>
            <td rowspan="2" colspan="2">单元格11,12,16,17</td>
            <td>单元格12</td>
            <td>单元格13</td>
            <td>单元格14</td>
            <td rowspan="2">单元格15,20</td>
        </tr>
        <tr>
            <td>单元格16</td>
            <td>单元格17</td>
            <td>单元格18</td>
            <td>单元格19</td>
        </tr>
    </table>
</div>
<!--块元素内连元素-->
<table border="1px" width="200px" height="10px">
    <tr>
        <td><em>内联元素</em><td>
        <td>行内元素不会独占页面一行 只站自身大小</td>
        <td>行内元素设置width height属性无效</td>
        <td>一般内联元素包含元素不包含块级元素</td>
    </tr>
        <tr>
            <tr><td><em>块级元素</em></td>
            <td>块元素会在页面独占一行(自上向下垂直排列)</td>
            <td>可以设置width,height属性</td>
            <td>一般块级元素可以包含行内元素和其他块级元素</td>
        </tr>
    <tr>
        <td><em>常见块元素</em></td>
        <td> ul </td>
        <td> table </td>
        <td>  h1~h6  </td>
        <td> form </td>
        <td> p </td>
        <td> div </td>
    </tr>
    <tr>
        <td><em>常见行内块级元素(不含行 能识别宽高)</em></td>
        <td>button</td>
        <td>img</td>
        <td>input</td>
    </tr>
    <tr>
        <td><em>常见内联元素</em></td>
        <td>a</td>
        <td>b</td>
        <td>em</td>
        <td>i</td>
        <td>span</td>
        <td>strong</td>
    </tr>
    <p>块元素会在页面中独占一行,行内元素不会独占页面中的一行，只占自身的大小</p>
    <p>块元素可以设置width，height属性,行内元素设置width，height属性无效</p>
    <p>⼀般块级元素可以包含行内元素和其他块级元素,⼀般内联元素包含内联元素不包含块级元素</p>
</table>
<!--HTML5新标签-->
<div>
<header>头部</header>
    <nav>导航</nav>
    <section>定义文档的节 例如章节 页眉 页脚</section>
    <aside>侧边拦</aside>
    <footer>脚部</footer>
    <article>一个独立完整的内容</article>
</div>
</body>
</html>